<template>
  <div class="container">
    <el-card v-show="false">
      <div slot="header">{{ role.role_name }}</div>
      <!-- <el-table :data="tableList" stripe height="100%">
        <el-table-column
          prop="nav_name"
          :label="$language.local('nav_name')"
          align="center"
          width="380px"
        >
          <template slot-scope="scope">
            <div>{{ $language.local(scope.row.nav_name) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$language.local('action_type')"
          header-align="center"
          align="left"
        >
          <template slot-scope="scope">
            <span
              v-for="item in scope.row.action_type.split(',')"
              :key="item"
              class="mr-1"
            >
              <el-checkbox v-model="delivery"> </el-checkbox>
              {{ $language.local(item) }}
            </span>
            <el-button
              icon="el-icon-plus"
              size="mini"
              circle=""
              type="primary"
              @click="onAddAuth(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </el-card>
    <el-table
      :data="nav"
      stripe
      height="100%"
      row-key="id"
      style="width: 100%"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :indent="22"
    >
      <el-table-column
        :label="$language.local('nav_name')"
        header-align="center"
        prop="title"
        width="380px"
      >
      </el-table-column>

      <el-table-column
        :label="$language.local('action_type')"
        header-align="center"
        align="left"
      >
        <template slot-scope="scope">
          <!-- {{ Array.isArray(roleNav[scope.row.name]) }} -->
          <el-checkbox-group v-model="roleNav[scope.row.name]">
            <template v-for="item in scope.row.auths">
              <el-checkbox :label="item" :key="item" :value="item">
                {{ $language.local(item) }}
              </el-checkbox>
            </template>
          </el-checkbox-group>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="onSave">保存</el-button>
    <!-- <el-table
      :data="nav[0].children"
      stripe
      height="100%"
      :row-key="getRowKey"
      style="width: 100%"
      :expand-row-keys="expands"
      :tree-props="{ children: 'children1', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.children"
            :show-header="false"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column
              :label="$language.local('nav_name')"
              header-align="center"
              prop="title"
              width="380px"
            >
            </el-table-column>
            <el-table-column
              :label="$language.local('action_type')"
              header-align="center"
              align="left"
            >
              <template slot-scope="scope">
                <span
                  v-for="item in scope.row.action_type.split(',')"
                  :key="item"
                  class="mr-1"
                >
                  <el-checkbox v-model="delivery"> </el-checkbox>
                  {{ $language.local(item) }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        :label="$language.local('nav_name')"
        header-align="center"
        prop="title"
        width="380px"
      >
      </el-table-column>
      <el-table-column
        :label="$language.local('action_type')"
        header-align="center"
        align="left"
      >
        <template slot-scope="scope">
          <span
            v-for="item in scope.row.action_type.split(',')"
            :key="item"
            class="mr-1"
          >
            <el-checkbox v-model="delivery"> </el-checkbox>
            {{ $language.local(item) }}
          </span>
        </template>
      </el-table-column>
    </el-table> -->
    <el-dialog
      :title="$language.local('添加权限')"
      :visible.sync="addAuthVisible"
    >
      <el-form ref="ReasonRef" :model="addForm" class="grid-flex">
        <span v-for="(value, key) in actionType" :key="key" class="mr-1 mb-1">
          <el-checkbox v-model="addForm[key]"> </el-checkbox>
          {{ value }}
        </span>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onCheck(2)">确 定</el-button>
      </div> -->

      <!-- <div class="grid-flex">
        <span v-for="(value, key) in actionType" :key="key" class="mr-2 mb-1">
          <el-checkbox> </el-checkbox>

          {{ value }}
        </span>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expands: ["233"],
      id: "",
      role: "",
      checkedCities: [],
      delivery: true,
      addAuthVisible: false,
      columns: {
        id: 26850,
        role_id: 5,
        nav_name: "yjs",
        action_type: "Show",
      },
      addForm: {},
      tableList: [],
      nav_name: "",
      actionType: {},
      nav: [],
      roleNav: {},
      roleNav3: {},
      roleNav2: {
        yjs: ["Show"],
        ProjectMana: ["Show"],
        ServiceProjectList: ["Show", "View", "Add", "Edit", "Delete"],
        sys_employee: ["Show"],
        employeeList: [
          "Show",
          "View",
          "Add",
          "Edit",
          "Delete",
          "OffBuild",
          "Audit",
          "ExportIn",
        ],
        employeeSignList: [
          "Show",
          "View",
          "Add",
          "Edit",
          "Delete",
          "Reply",
          "DownFile",
        ],
        PersonalCreditList: ["Show", "View"],
        transaction: ["Show"],
        accountinfo: ["Show", "View"],
        recharge: ["Show", "View"],
        review: ["Show", "View", "Add", "Edit"],
        refund: ["Show", "View", "Add", "Edit", "Delete"],
        guide: ["Show", "View"],
        payrefund: ["Show", "View", "Add", "Edit", "Delete"],
        sys_safe: ["Show"],
        query: ["Show", "View"],
        batchlist: ["Show", "View"],
        invoice: ["Show"],
        invoice_apply: ["Show", "View", "Add", "Edit", "Delete"],
        invoice_list: ["Show", "View", "Add", "Edit", "Delete"],
        invoice_address: ["Show", "View", "Add", "Edit", "Delete"],
        agentlist: ["Show", "View", "Add", "Edit", "Delete"],
        sys_controller: ["Show"],
        set_pwd: ["Show", "View", "Add", "Edit", "Delete"],
        manager_list: ["Show", "View", "Add", "Edit", "Delete"],
      },
    };
  },
  async created() {
    let { id } = this.$route.query;
    if (!id) {
      this.$router.replace("/manager_role");
    }

    const res = await this.$http.get("/api/nav/GetActionType");
    this.actionType = res.data.Data;

    const res2 = await this.$http.get("/api/role/GetnavigationList");
    console.log(res2);
    this.nav2 = res2.data.Data;
    let nav = this.uniqueNav(res2.data.Data);
    console.log(nav);
    this.nav = this.getNav(nav);

    const response = await this.$http.get(`/api/role/GetModel/${id}`);
    console.log(response);
    this.role = response.data.Data;
    let arr = this.unique(this.role.u_manager_role_values);
    this.tableList = arr;

    console.log(this.nav);

    console.log(this.roleNav);
    console.log(typeof this.roleNav["yjs"]);
  },
  methods: {
    getRowKey(row) {
      return row.id;
    },
    unique(arr) {
      const res = [];
      const obj = {};
      const obj2 = this.roleNav;
      for (let i = 0; i < arr.length; i++) {
        if (typeof obj[arr[i].nav_name] === "undefined") {
          obj[arr[i].nav_name] = res.length;
          obj2[arr[i].nav_name].push(arr[i].action_type);
          res.push(arr[i]);
        } else {
          res[obj[arr[i].nav_name]].action_type += "," + arr[i].action_type;
          obj2[arr[i].nav_name].push(arr[i].action_type);
        }
      }
      this.roleNav = obj2;
      return res;
    },
    uniqueNav(arr) {
      const obj = {};
      const obj2 = {};
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        obj2[arr[i].name] = [];
        element.auths = element.action_type.split(",");
        if (!obj[element.parent_id]) {
          obj[element.parent_id] = { subMenus: [element] };
        } else {
          obj[element.parent_id].subMenus.push(element);
        }
      }
      this.roleNav = obj2;
      return obj;
    },
    getNav(arr) {
      let nav = arr[0].subMenus;
      nav[0].children = arr[nav[0].id].subMenus;
      let array = nav[0].children;
      for (let i = 0; i < array.length; i++) {
        array[i].children = arr[array[i].id].subMenus;
      }
      return nav;
    },
    // spliceNav(array = []) {
    //   // let index = array.findIndex((v) => v.parent_id === 0);
    //   // let arr = array.splice(index, 1);
    //   // while (condition) {

    //   // }
    // },
    formatter(row, column, cellValue, index) {
      console.log(index);
      console.log(cellValue);
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex);
      // if (rowIndex % 2 === 0) {
      //   if (columnIndex === 0) {
      //     return [1, 2];
      //   } else if (columnIndex === 1) {
      //     return [0, 0];
      //   }
      // }
    },
    objectSpanMethod({ row, columnIndex }) {
      if (columnIndex === 0) {
        if (row.nav_name === this.nav_name) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        } else {
          this.nav_name = row.nav_name;
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },
    onAddAuth(nav) {
      console.log(nav);
      let arr = nav.action_type.split(",");
      let form = {};
      arr.forEach((v) => {
        form[v] = true;
      });
      this.addForm = form;
      this.addAuthVisible = true;
    },
    handleCheckedActionTypeChange() {},
    onSave() {
      console.log(this.roleNav);
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  padding-bottom: 3rem;
}
</style>
